<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("circle")
    .attr("cx", 350)
    .attr("cy", 200)
    .attr("r", 200)
    .style("fill", "red")
    .style("opacity", "0.5");

svg.append("circle")
    .attr("cx", 550)
    .attr("cy", 200)
    .attr("r", 200)
    .style("fill", "blue")
    .style("fill-opacity", ".5");

svg.append("circle")
    .attr("cx", 450)
    .attr("cy", 300)
    .attr("r", 200)
    .style("fill", "green")
    .style("opacity", ".4");

</script>